<template>
  <div class="historicaldetails">
    <div class="tit">
      <span class="goback" style="font-size: .2rem;font-weight: 700;">相机布设</span>
      <span style="font-size: .2rem;margin:0 .1rem;">></span>
      <span style="font-size: .2rem;font-weight: 700;">详情</span>

      <div style="position: absolute;right: .2rem;">
        <el-button @click="gohistory" size="small">返回</el-button>
      </div>
    </div>

    <!--tab-->
    <div style="padding-left: .2rem;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="信息修改" name="first">信息修改</el-tab-pane>
        <el-tab-pane label="照片展示" name="second">照片展示</el-tab-pane>
      </el-tabs>
    </div>
    <!--tab-->

    <div v-show="activeName == 'first'">
      <div class="basemessage">
        <div style="flex: 6">
          <div class="tit2">
            <span style="margin-right: .1rem;">基本信息</span>
            <span v-if="abilityList.indexOf('edit') != -1" @click="opisbm"
              style="cursor: pointer;background-color: #00CC46;padding:3px;border-radius:10px;color:#FFFFFF"
              class="el-icon-edit"></span>
          </div>
          <div style="margin-top: .1rem;width: 100%;">
            <table>
              <thead>
                <th style="width: 11%;">卡编号</th>
                <th style="width: 20%;">布设时间</th>
                <th style="width: 20%;">回收时间</th>
                <th style="width: 12.5%;">海拔</th>
                <th style="width: 12.5%;">经度</th>
                <th style="width: 12.5%;">纬度</th>
                <th style="width: 13%">布设人/回收人</th>
              </thead>
              <tbody>
                <tr>
                  <td>{{ filtration(HDD.cameraCardId) }}</td>
                  <td>{{ filtration(HDD.layTime) }}</td>
                  <td>{{ filtration(HDD.recovDate) }}</td>
                  <td>{{ filtration(HDD.altitude) }}</td>
                  <td>{{ filtration(typeof (HDD.eastLongitude) == 'number' ? HDD.eastLongitude.toFixed(5) : '') }}</td>
                  <td>{{ filtration(typeof (HDD.northernLatitude) == 'number' ? HDD.northernLatitude.toFixed(5) : '') }}
                  </td>
                  <td>{{ filtration(HDD.layUser) }}/{{ filtration(HDD.recovUser) }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="tit2">
            <span style="margin-right: .1rem;">生境信息</span>
            <span v-if="abilityList.indexOf('edit') != -1" @click="opnesj"
              style="cursor: pointer;background-color: #00CC46;padding:3px;border-radius:10px;color:#FFFFFF"
              class="el-icon-edit"></span>
          </div>
          <div style="margin-top: .1rem;">
            <table>
              <thead>
                <th>坡向</th>
                <th>乔木高度</th>
                <th>生境类型</th>
                <th>森林起源</th>
                <th>草本高度</th>
              </thead>
              <tbody>
                <tr>
                  <td>{{ filtration(HDD.exposure) }}</td>
                  <td>{{ filtration(HDD.qiaomuHeight) }}</td>
                  <td>{{ filtration(HDD.envirType) }}</td>
                  <td>{{ filtration(HDD.forestOrigin) }}</td>
                  <td>{{ filtration(HDD.caobenHeight) }}</td>
                </tr>
              </tbody>
            </table>
            <table>
              <thead>
                <th>草本盖度</th>
                <th>灌木高度</th>
                <th>乔木郁闭度</th>
                <th>乔木胸径</th>
                <th>干扰频率</th>
              </thead>
              <tbody>
                <tr>
                  <td>{{ filtration(HDD.caobenCanopyDensity) }}</td>
                  <td>{{ filtration(HDD.guanmuHeight) }}</td>
                  <td>{{ filtration(HDD.qiaomuCanopyDensity) }}</td>
                  <td>{{ filtration(HDD.qiaomuBraHeight) }}</td>
                  <td>{{ filtration(HDD.interfRate) }}</td>
                </tr>
              </tbody>
            </table>
            <table>
              <thead>
                <th>草本优势种</th>
                <th>灌木优势树种</th>
                <th>动物痕迹</th>
                <th>灌木盖度</th>
                <th>干扰类型</th>
              </thead>
              <tbody>
                <tr>
                  <td>{{ filtration(HDD.caobenAdvantageSpecies) }}</td>
                  <td>{{ filtration(HDD.shrubsAdvantageSpecies) }}</td>
                  <td>{{ filtration(HDD.traceAnimal) }}</td>
                  <td>{{ filtration(HDD.guanmuCanopyDensity) }}</td>
                  <td>{{ filtration(HDD.interfType) }}</td>
                </tr>
              </tbody>
            </table>
            <table>
              <thead>
                <th>1KM网格编号</th>
                <th>2KM网格编号</th>
                <th>痕迹类型</th>
                <th>干扰强度</th>
                <th>小生境</th>
              </thead>
              <tbody>
                <tr>
                  <td>{{ filtration(HDD.oneKmGridNum) }}</td>
                  <td>{{ filtration(HDD.twoKmGridNum) }}</td>
                  <td>{{ filtration(HDD.traceType) }}</td>
                  <td>{{ filtration(HDD.interfStrength) }}</td>
                  <td>{{ filtration(HDD.smallEnvir) }}</td>
                </tr>
              </tbody>
            </table>
            <table>
              <thead>
                <th>总备注</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
              </thead>
              <tbody>
                <tr>
                  <td>{{ filtration(HDD.remark) }}</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </tbody>
            </table>

          </div>
        </div>
        <div style="flex: 4;position: relative">
          <div class="big_image_set">
            <div class="alpt" title="查看大图">
              <viewer :images="sjpList" style="opacity: 0">
                <img v-for="src in sjpList" :src="src" :key="src" width="50">
              </viewer>
            </div>
            <div v-if="abilityList.indexOf('edit') != -1" title="上传照片" @click="upimg">
              <img src="../../static/images/上传.png" alt="">
            </div>
            <div v-if="abilityList.indexOf('edit') != -1" title="删除" @click="delimg">
              <img src="../../static/images/del.png" alt="">
            </div>
          </div>
          <div class="sjp">
            <div>
              <img @click="sjpl" src="../../static/images/icon/l.png" alt="">
            </div>
            <div>
              <img @click="sjpr" src="../../static/images/icon/r.png" alt="">
            </div>
            <div>
              <span>{{ sjpnum }}/{{ sjpList.length }}</span>
            </div>
            <img v-if="sjpList.length == 0" src="../../static/images/np.jpg" alt="">
            <img :src="sjpList[sjpnum - 1]" v-else alt="">
          </div>

          <!-- <div style="width: 100%;margin-top: .2rem;overflow: hidden" class="clearfix">
             <div class="smimg" v-for="sj in sjpList">
               <img :src="'/iapi'+sj" alt="">
             </div>
           </div>-->

        </div>
      </div>
    </div>
    <div v-show="activeName == 'second'">
      <!--照片展示-->
      <div class="p_main">
        <div style="width: 100%;height: 100%;justify-content: center;align-items: center;" v-if="!detailsok">
          <img src="../../static/images/np.jpg" alt="">
        </div>
        <div v-if="detailsok">
          <div class="l_nav">
            <div v-show="false"></div>
            <div>
              <div :style="si.color ? 'background-color: #1FB456;' : 'background-color: #ccc;'" v-for="si in species"
                @click="speciesParticulars(si)">{{ si.name }}
              </div>
            </div>

          </div>
          <div class="r_main">
            <div>
              <div class="big_photo">
                <div class="left">
                  <div @click="previous_page">
                    <!--<span>-->
                    <!--<i class="icon iconfont icon-jiantou-copy"></i>-->
                    <!--</span>-->
                    <img src="../../static/images/icon/l.png" alt="">
                  </div>
                </div>
                <div class="main">
                  <!--isMp4-->
                  <img v-if="state == 0 && isMp4(no_phot) == '照片'" :src="masterMap(no_phot)" alt="">
                  <video v-if="state == 0 && isMp4(no_phot) == '视频'" :src="isvideocloud(no_phot)"
                    controls="controls"></video>
                  <img v-if="state == 1" :src="masterMap(no_phot)" alt="">
                </div>
                <div class="right">
                  <div @click="next_page">
                    <img src="../../static/images/icon/r.png" alt="">
                    <!--<span>-->
                    <!--<i class="icon iconfont icon-arrow-right"></i>-->
                    <!--</span>-->
                  </div>
                  <div>
                    {{ now_pn }}/{{ all_pn }}
                  </div>
                </div>
              </div>

              <!--  <div class="message_show">
                  <div class="clearfix">
                    <span>拍摄时间:{{incision(speciesdatails.shootingTime)}}</span>
                    <span>经度:{{speciesdatails.lon}}</span>
                    <span>纬度:{{speciesdatails.lat}}</span>
                    <span class="slect_time">
                        选择时间:
                        <span>2015-04-23</span>
                       <div class="slect_op">
                        <el-select v-model="selects" @change="gb" clearable placeholder="请选择">
                          <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                      </span>
                  </div>
                </div>-->

              <!--轮播图-->
              <div style="margin-top: .2rem;">
                <ul class="carousel">
                  <li v-for="(cs, index) in carousel" @click="replace_photo(cs, index)">
                    <div :style="cs.color ? 'border: 0.03rem solid #1FB456;' : 'border: 0.01rem solid #cccccc;'">
                      <img v-if="isMp4(cs.accessorySrc) == '照片'" :src="'/iapi' + cs.accessorySrc" alt="">
                      <img v-if="isMp4(cs.accessorySrc) == '视频'" src="../../static/images/shipin.jpg" alt="">
                      <div>
                        <span>{{ incision(cs.shootingTime) }}</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <!--轮播图-->

            </div>
            <div>
              <div class="basic_title">
                <span></span>
                <span>基本信息</span>
              </div>
              <ul>
                <li class="clearfix"><span>物种名称</span><span>{{ filtration(speciesdatails.speciesName) }}</span></li>
                <li class="clearfix"><span>鉴定人</span><span>{{ filtration(speciesdatails.identifyPeople) }}</span></li>
                <li class="clearfix"><span>拍摄时间</span><span>{{ filtration(speciesdatails.shootingTime) }}</span></li>
                <li class="clearfix"><span>温度</span><span>{{ filtration(speciesdatails.temperature) }}℃</span></li>
                <li class="clearfix"><span>照片编号</span><span>{{ filtration(speciesdatails.imageName) }}</span></li>
                <li class="clearfix"><span>照片质量</span><span>{{ filtration(speciesdatails.imageQuality) }}</span></li>
                <li class="clearfix"><span>物种数量</span><span>{{ filtration(speciesdatails.animalNum) }}</span></li>
                <li class="clearfix"><span>物质类别</span><span>{{ filtration(speciesdatails.objType) }}</span></li>
                <li class="clearfix"><span>物种性别</span><span>{{ filtration(speciesdatails.speciesGender) }}</span></li>
                <li class="clearfix"><span>备注</span><span>{{ filtration(speciesdatails.remark) }}</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!--照片展示-->
    </div>

    <div class="modification" v-show="isbm">
      <div class="mfcr">
        <div class="mtit">
          <span>修改基本信息</span>
        </div>
        <div style="margin-top: .1rem;">
          <el-form ref="form" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="布设时间">
                  <el-date-picker style="width: 100%" v-model="layDate" @change="getLayTime" type="datetime"
                    :default-value="c_time(HDD.layTimeLong)" :placeholder="HDD.layTime">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回收时间">
                  <el-date-picker style="width: 100%" v-model="recycleDate" type="datetime" @change="getrecycleTime"
                    :default-value="c_time(HDD.recovDateLong)" :placeholder="HDD.recovDate">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="布设人员">
                  <el-input v-model="HDD.layUser"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="回收人员">
                  <el-input v-model="HDD.recovUser"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="卡编号">
                  <el-input v-model="HDD.cameraCardId"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="相机型号">
                  <el-input v-model="HDD.cameraType"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="经度">
                  <el-input v-model.number="HDD.eastLongitude"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度">
                  <el-input v-model.number="HDD.northernLatitude"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="海拔">
                  <el-input v-model="HDD.altitude"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-form-item style="text-align: center">
              <el-button @click="quite">取消</el-button>
              <el-button type="primary" @click="onSubmit">确认修改</el-button>
            </el-form-item>

          </el-form>

        </div>
      </div>
    </div>

    <div class="modification" v-show="issj">
      <div class="mfcr">
        <div class="mtit">
          <span>修改生境信息</span>
        </div>
        <div style="margin-top: .1rem;">
          <el-form ref="form" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="坡向">
                  <!--<el-input v-model="HDD.exposure"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.exposure" placeholder="请选择坡向">
                    <el-option label="东" value="东"></el-option>
                    <el-option label="东南" value="东南"></el-option>
                    <el-option label="南" value="南"></el-option>
                    <el-option label="西南" value="西南"></el-option>
                    <el-option label="西" value="西"></el-option>
                    <el-option label="西北" value="西北"></el-option>
                    <el-option label="北" value="北"></el-option>
                    <el-option label="东北" value="东北"></el-option>
                    <el-option label="无坡向" value="无坡向"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乔木高度">
                  <el-input v-model="HDD.qiaomuHeight"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="生境类型">
                  <!--<el-input v-model="HDD.envirType"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.envirType" placeholder="请选择生境类型">
                    <el-option label="常阔" value="常阔"></el-option>
                    <el-option label="常阔混交" value="常阔混交"></el-option>
                    <el-option label="落阔" value="落阔"></el-option>
                    <el-option label="针阔混交" value="针阔混交"></el-option>
                    <el-option label="针叶林" value="针叶林"></el-option>
                    <el-option label="灌丛" value="灌丛"></el-option>
                    <el-option label="草坡" value="草坡"></el-option>
                    <el-option label="流石滩" value="流石滩"></el-option>
                    <el-option label="滩涂" value="滩涂"></el-option>
                    <el-option label="苇塘" value="苇塘"></el-option>
                    <el-option label="水面" value="水面"></el-option>
                    <el-option label="草甸" value="草甸"></el-option>
                    <el-option label="沼泽" value="沼泽"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="森林起源">
                  <!--<el-input v-model="HDD.forestOrigin"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.forestOrigin" placeholder="请选择森林起源">
                    <el-option label="原始林" value="原始林"></el-option>
                    <el-option label="次生林" value="次生林"></el-option>
                    <el-option label="人工林" value="人工林"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="草本高度">
                  <el-input v-model="HDD.caobenHeight"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="草本盖度">
                  <!--<el-input v-model="HDD.forestOrigin"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.caobenCanopyDensity" placeholder="请选择草本盖度">
                    <el-option label="0~15%" value="0~15%"></el-option>
                    <el-option label="15%~30%" value="15%~30%"></el-option>
                    <el-option label="30%~45%" value="30%~45%"></el-option>
                    <el-option label="45%~60%" value="45%~60%"></el-option>
                    <el-option label="60%~80%" value="60%~80%"></el-option>
                    <el-option label="＞80%" value="＞80%"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="灌木高度">
                  <el-input v-model="HDD.guanmuHeight"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乔木郁闭度">
                  <!--<el-input v-model="HDD.qiaomuCanopyDensity"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.qiaomuCanopyDensity" placeholder="请选择乔木郁闭度">
                    <el-option label="0~15%" value="0~15%"></el-option>
                    <el-option label="15%~30%" value="15%~30%"></el-option>
                    <el-option label="30%~45%" value="30%~45%"></el-option>
                    <el-option label="45%~60%" value="45%~60%"></el-option>
                    <el-option label="60%~80%" value="60%~80%"></el-option>
                    <el-option label="＞80%" value="＞80%"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="乔木胸径">
                  <el-input v-model="HDD.qiaomuBraHeight"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="干扰频率">
                  <!--<el-input v-model="HDD.interfRate"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.interfRate" placeholder="请选择干扰频率">
                    <el-option label="经常" value="经常"></el-option>
                    <el-option label="很少" value="很少"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="灌木优势种">
                  <el-input v-model="HDD.shrubsAdvantageSpecies"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="动物痕迹">
                  <el-input v-model="HDD.traceAnimal"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="灌木盖度">
                  <!--<el-input v-model="HDD.guanmuCanopyDensity"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.guanmuCanopyDensity" placeholder="请选择灌木盖度">
                    <el-option label="0~15%" value="0~15%"></el-option>
                    <el-option label="15%~30%" value="15%~30%"></el-option>
                    <el-option label="30%~45%" value="30%~45%"></el-option>
                    <el-option label="45%~60%" value="45%~60%"></el-option>
                    <el-option label="60%~80%" value="60%~80%"></el-option>
                    <el-option label="＞80%" value="＞80%"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="干扰类型">
                  <!--<el-input v-model="HDD.interfType"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.interfType" placeholder="请选择干扰类型">
                    <el-option label="放牧" value="放牧"></el-option>
                    <el-option label="旅游" value="旅游"></el-option>
                    <el-option label="公路" value="公路"></el-option>
                    <el-option label="采伐" value="采伐"></el-option>
                    <el-option label="打猎" value="打猎"></el-option>
                    <el-option label="挖药" value="挖药"></el-option>
                    <el-option label="挖矿" value="挖矿"></el-option>
                    <el-option label="居民区" value="居民区"></el-option>
                    <el-option label="农业生产" value="农业生产"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="1KM网格编号">
                  <el-input v-model="HDD.oneKmGridNum"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="2KM网格编号">
                  <el-input v-model="HDD.twoKmGridNum"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="痕迹类型">
                  <!--<el-input v-model="HDD.traceType"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.traceType" placeholder="请选择痕迹类型">
                    <el-option label="动物实体" value="动物实体"></el-option>
                    <el-option label="粪便" value="粪便"></el-option>
                    <el-option label="脚印" value="脚印"></el-option>
                    <el-option label="取食痕迹" value="取食痕迹"></el-option>
                    <el-option label="挖掘痕迹" value="挖掘痕迹"></el-option>
                    <el-option label="动物身体遗落物" value="动物身体遗落物"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="干扰强度">
                  <!--<el-input v-model="HDD.interfStrength"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.interfStrength" placeholder="请选择干扰强度">
                    <el-option label="强" value="强"></el-option>
                    <el-option label="中" value="中"></el-option>
                    <el-option label="弱" value="弱"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="小生境">
                  <!--<el-input v-model="HDD.smallEnvir"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.smallEnvir" placeholder="请选择小生境">
                    <el-option label="河边" value="河边"></el-option>
                    <el-option label="林下" value="林下"></el-option>
                    <el-option label="竹林中" value="竹林中"></el-option>
                    <el-option label="草丛" value="草丛"></el-option>
                    <el-option label="树洞" value="树洞"></el-option>
                    <el-option label="岩下" value="岩下"></el-option>
                    <el-option label="公路上" value="公路上"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="草本优势种">
                  <el-input v-model="HDD.caobenAdvantageSpecies"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="总备注">
                  <el-input v-model="HDD.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item style="text-align: center">
              <el-button @click="isno">取消</el-button>
              <el-button type="primary" @click="isOk">确认修改</el-button>
            </el-form-item>

          </el-form>

        </div>
      </div>
    </div>


    <!--上传 B-->
    <div class="uploadBox" v-if="uploadBox">
      <div>
        <div class="photoList">
          <el-upload :data="upd.data" :action="upd.action" list-type="picture-card" accept="video/*||image/*"
            :auto-upload="false" :http-request="ImageRequest" ref="upload" multiple>
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>

        <div class="start">
          <el-button size="mini" type="success" @click="submitUpload">开始上传</el-button>
          <el-button size="mini" type="primary" @click="closeuploadBox">结束上传</el-button>
        </div>

      </div>
    </div>
    <!--上传 E-->

  </div>
</template>
<script>
import api from '../utils/api'
import http from '../utils/http'

export default {
  data() {
    return {
      activeName: "first",
      HDD: {},
      sjpList: [],
      sjpnum: 1,
      layDate: "",
      recycleDate: "",
      isbm: false,
      issj: false,
      detailsok: true,
      carousel: [],
      speciesdatails: [],
      species: [],
      no_phot: "../../static/images/np.jpg",
      now_pn: 0,
      all_pn: 0,
      state: 0,
      animalName: "",
      signImages: [''],
      dialogImageUrl: '',
      dialogVisible: false,
      uploadBox: false,
      upd: {
        action: api.infrared.updateImg,
        data: {
          id: "",
        }
      },
      datafiles: [],
      abilityList: []
    }
  },
  created() {
    this.HDD = JSON.parse(sessionStorage.getItem('HDD'));
    this.getenvirImageList();
    this.abilityList = sessionStorage.getItem('abilityList');
  },
  mounted() {
    this.photo_details();
  },
  methods: {
    ImageRequest(file) {
      this.datafiles.push(file.file);
    },
    delimg() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let vm = this;
        (async function f() {
          let res = await http.post(api.infrared.deleteEnvirImage + '?id=' + vm.HDD.id + '&url=' + vm.sjpList[vm.sjpnum - 1])
          if (res.data.code == '200') {
            vm.sjpList.splice(vm.sjpnum - 1, 1);
            vm.sjpnum = 1;
            vm.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            alert(res.data.message);
          }
        })()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    upimg() {
      this.upd.data.id = this.HDD.id;
      this.uploadBox = true;
    },
    getenvirImageList() {
      let vm = this;
      (async function f() {
        let res = await http.post(api.infrared.envirImageList + '?type=&id=' + vm.HDD.id)
        if (res.data.code == '200') {
          res.data.data.forEach(e => {
            e = '/sapi' + e
          })
          vm.sjpList = res.data.data;
          vm.sjpnum = 1;
        }
      })()
    },
    submitUpload() {
      this.$refs.upload.submit();
      let vm = this;
      let fd = new FormData();
      this.datafiles.forEach(function (file, index) {
        fd.append('files', file, file.name); // 因为要上传多个文件，所以需要遍历一下才行
      })
      fd.append("id", this.HDD.id);
      (async function f() {
        let res = await http.post(api.infrared.uploadEnvirImage, fd)
        if (res.data.code == '200') {
          vm.$message({
            message: '上传图片成功！',
            type: 'success'
          });
        }
      })()
    },
    closeuploadBox() {
      this.getenvirImageList();
      this.uploadBox = false;
    },
    incision(value) {
      if (value == "" || value == null || value == undefined) {
        return ""
      } else {
        var a = value.split(" ")[0];
        return a;
        return value
      }

    },
    replace_photo(cs, index) {
      this.no_phot = cs.accessorySrc;

      this.speciesdatails = this.carousel[index];

      this.now_pn = index + 1;

      if (index > 2 && index < this.carousel.length - 2) {
        $(".carousel").stop().animate({ left: -(index - 2) * 1.5 + "rem" }, 500)
      }

      if (index <= 2) {
        $(".carousel").stop().animate({ left: 0 }, 500)
      }

      this.carousel.forEach((e => {
        e.color = false;
      }))
      cs.color = true
    },
    next_page() {
      var ind = 0;
      this.carousel.forEach((e => {
        if (e.color == true) {
          ind = this.carousel.indexOf(e) + 1;
          e.color = false
        }
        return ind
      }))
      if (ind < this.carousel.length) {
        this.carousel[ind].color = true
        this.now_pn = ind + 1;
        this.no_phot = this.carousel[ind].accessorySrc;
        this.speciesdatails = this.carousel[ind];
      } else {
        this.carousel[this.carousel.length - 1].color = true
      }


      if (ind > 2 && ind < this.carousel.length - 2) {
        $(".carousel").stop().animate({ left: -(ind - 2) * 1.5 + "rem" }, 500)
      } else if (ind <= 2) {
        $(".carousel").stop().animate({ left: 0 }, 500)
      }

    },
    speciesParticulars(si) {
      $(".carousel").stop().animate({ left: 0 }, 500)
      this.species.forEach((e => {
        e.color = false
      }))
      si.color = true;
      this.animalName = si.name;
      this.mgad();
    },
    mgad() {
      var vm = this;
      (async function () {
        let res = await http.get(api.infrared.imageIdentifyList, {
          cameraEnvirId: vm.HDD.id,
          status: 2,
          animalName: vm.animalName,
          selects: ""
        })

        var arrdata = [];
        var arrdate = [];
        for (var k in res.data) {
          arrdata.push(res.data[k])
        }
        arrdata[0].data.forEach((e => {
          e["color"] = false
        }))
        arrdata[0].date.forEach((e => {
          var z = {
            value: e
          }
          arrdate.push(z);
        }));
        vm.carousel = arrdata[0].data;
        vm.speciesdatails = arrdata[0].data[0];
        //          vm.options2 = arrdate;
        vm.count_size();
        if (vm.carousel.length > 0) {
          vm.carousel[0].color = true
          vm.no_phot = vm.carousel[0].accessorySrc;
          vm.now_pn = 1;
          vm.all_pn = vm.carousel.length;
          vm.state = 0;
        } else {
          vm.state = 1;
          var z = {
            src: "../../../../static/img/none.jpg",
            color: false
          }
          vm.carousel.push(z);
        }
      })()
    },
    previous_page() {
      var ind = 0;
      this.carousel.forEach((e => {
        if (e.color == true) {
          ind = this.carousel.indexOf(e) - 1;
          e.color = false
        }
        return ind
      }))
      if (ind >= 0) {
        this.carousel[ind].color = true
        --this.now_pn;
        this.no_phot = this.carousel[ind].accessorySrc;
        this.speciesdatails = this.carousel[ind];
      } else {
        this.now_pn = 1;
        this.carousel[0].color = true
      }


      if (ind > 2 && ind < this.carousel.length - 2) {
        $(".carousel").stop().animate({ left: -(ind - 2) * 1.5 + "rem" }, 500)
      } else if (ind <= 2) {
        $(".carousel").stop().animate({ left: 0 }, 500)
      }

    },
    photo_details() {
      var vm = this;
      (async function () {
        let res = await http.get(api.infrared.imageIdentifyList, {
          cameraEnvirId: vm.HDD.id,
          status: 2
        })
        if (JSON.stringify(res.data) != "{}") {
          vm.detailsok = true;
          var arr = [];
          var arrdata = [];
          var arrdate = [];
          for (var k in res.data) {
            var z = {
              name: k,
              color: false
            }
            arr.push(z);
            arrdata.push(res.data[k])
          }
          arrdata[0].data.forEach((e => {
            e["color"] = false
          }))
          arrdata[0].date.forEach((e => {
            var z = {
              value: e
            }
            arrdate.push(z);
          }));
          vm.carousel = arrdata[0].data;
          vm.speciesdatails = arrdata[0].data[0];
          //            vm.options2 = arrdate;
          vm.species = arr;
          vm.species[0].color = true;
          vm.count_size();
          if (vm.carousel.length > 0) {
            vm.carousel[0].color = true
            vm.no_phot = vm.carousel[0].accessorySrc;
            vm.now_pn = 1;
            vm.all_pn = vm.carousel.length;
            vm.state = 0;
          } else {
            vm.state = 1;
            var z = {
              src: "../../static/images/np.jpg",
              color: false
            }
            vm.carousel.push(z);
          }
        }

        if (JSON.stringify(res.data) == "{}") {
          vm.detailsok = false;
        }

      })()
    },
    //计算尺寸
    count_size() {
      $(".carousel").css("width", this.carousel.length * 1.5 + "rem")
    },

    getp(e) {
      if (e != "") {
        this.sjpList = e.split("#");
      }
    },
    sjpr() {
      if (this.sjpnum < this.sjpList.length) {
        this.sjpnum++;
      }
    },
    sjpl() {
      if (this.sjpnum > 1) {
        this.sjpnum--;
      }
    },
    onSubmit() {
      var vm = this;
      (async function () {
        await http.post(api.infrared.cameraEnvirupdate, vm.HDD)
        vm.success('修改成功');
        vm.isbm = false;
        window.sessionStorage.removeItem('HDD');
        window.sessionStorage.setItem('HDD', JSON.stringify(vm.HDD));
      })()
    },
    gohistory() {
      this.$router.push('/historicalSetting');
      window.sessionStorage.removeItem('HDD');
    },
    isOk() {
      var vm = this;
      (async function () {
        await http.post(api.infrared.cameraEnvirupdate, vm.HDD
        )
        vm.success('修改成功');
        vm.issj = false;
        window.sessionStorage.removeItem('HDD');
        window.sessionStorage.setItem('HDD', JSON.stringify(vm.HDD));
      })()
    },
    isno() {
      this.issj = false;
    },
    opnesj() {
      this.issj = true;
    },
    opisbm() {
      this.isbm = true
    },
    quite() {
      this.isbm = false
    },
    //修改布设时间
    getLayTime(datetime) {
      var year = datetime.getFullYear();
      var month = datetime.getMonth() + 1;
      var date = datetime.getDate();
      var Hours = datetime.getHours();
      var Minutes = datetime.getMinutes();
      var Seconds = datetime.getSeconds();

      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (date >= 0 && date <= 9) {
        date = "0" + date;
      }
      if (Hours >= 1 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      if (Seconds >= 1 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var t1 = year + "-" + month + "-" + date + " " + Hours + ":" + Minutes + ":" + Seconds;

      this.HDD.layTime = t1;
      this.HDD.layTimeLong = new Date(datetime).getTime();
    },
    getrecycleTime(datetime) {
      var year = datetime.getFullYear();
      var month = datetime.getMonth() + 1;
      var date = datetime.getDate();
      var Hours = datetime.getHours();
      var Minutes = datetime.getMinutes();
      var Seconds = datetime.getSeconds();

      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (date >= 0 && date <= 9) {
        date = "0" + date;
      }
      if (Hours >= 1 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      if (Seconds >= 1 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }


      var t1 = year + "-" + month + "-" + date + " " + Hours + ":" + Minutes + ":" + Seconds;

      this.HDD.recovDate = t1;
      this.HDD.recovDateLong = new Date(datetime).getTime();
    },
    //时间过滤器
    c_time(e) {
      var a = (new Date(e))
      return a;
    },
    filtration(value) {
      if (value == "" || value == null) {
        return "--"
      } else {
        return value
      }
    },
    //判断云服务or本地服务
    iscloud(p) {
      if (p.split(":")[0] == 'http') {
        return p + '@oosImage|100h'
      }
      if (p.split(":")[0] == 'https') {
        return p + '?x-amz-process=image/resize,h_100,m_lfit'
      }
      return '/iapi' + p
    },
    //原图展示
    masterMap(p) {
      if (p.split(":")[0] == 'http' || p.split(":")[0] == 'https') {
        return p
      } else {
        let arr = p.split("/");
        let str = 'orginal_' + p.split("/")[p.split("/").length - 1];
        arr[arr.length - 1] = str;
        arr = arr.join('/');
        return '/iapi' + arr;
      }
    },
    isMp4(m) {
      let iv = m.split('.');
      if (iv[iv.length - 1].toLowerCase() == 'mp4') {
        return '视频'
      } else {
        return '照片'
      }
    },
    //判断视频来源
    isvideocloud(p) {
      if (p) {
        if (p.split(":")[0] == 'http' || p.split(":")[0] == 'https') {
          return p
        }
        return '/iapi' + p
      }
    },
    //成功
    success(t) {
      this.$message({
        message: t,
        type: 'success'
      });
    },
    //失败
    error(t) {
      this.$message.error(t);
    },
    //警告
    warn(t) {
      this.$message({
        message: t,
        type: 'warning'
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.name === 'historicalSetting') {
      to.meta.keepAlive = true
    }
    next()
  }
}
</script>
<style scoped>
@import "../../static/css/historicaldetails.css";
</style>
<style>
.el-tabs__content {
  display: none;
}
</style>
